<template>
    <div class="container">
        <van-nav-bar title="清运记录" left-arrow  @click-left="onClickLeft"/>
        <div class="content">
            <div class="title">{{ RemovalDetail.address }}</div>
            <div class="item">
                <template
                    v-for="(item,index) in RemovalDetailNews"
                    :key="index"
                >
                    <div class="news">
                        <p>{{ item.title}}</p>
                        <p>{{ item.value }}</p>
                    </div>
                </template>
            </div>
            <div class="operate">
                <button @click="goUpload">上传清运结果</button>
                <button @click="goLookDeliverReport">查看投递记录</button>
            </div>
            <van-overlay :show="show" @click="show = false">
            <div class="wrapper" @click.stop>
                <!-- 上传清运结果 -->
                <div class="block">
                    <p>本次清运有发现违规投递吗？</p>
                    <div class="operate">
                        <button 
                            v-for="(item,index) in correctBtn" 
                            :key="index"
                            @click="goUpdateSure(item)"
                        >{{ item.title }}</button>
                    </div>
                    <img src="../../assets/DeviceManage/01.png" @click="show = false">
                </div>
            </div>
        </van-overlay>
        </div>
    </div>
</template>

<script setup>
import { useRoute,useRouter } from 'vue-router';
import { 
    getRemovalInfo,
    goUpdateClearResult
} from '@/api/DeviceManage';
import { onMounted,ref } from 'vue';
import { showToast } from 'vant';
const route = useRoute()
const router = useRouter()
const onClickLeft = () => { //点击返回
    router.push({ 
        path:'/DeviceDetails',
        query:{
            id:route.query.id
        }
    })
}

let RemovalDetail = ref({})
let RemovalDetailNews = ref([])//页面数据的数组
let clearanceWorkOrder = ref('')//工单号
const getRemovalInfoFun = async () => { //清运详情
    let getRemovalInfoFunData = {
        pageIndex:1,
        pageSize:1,
        id:route.query.id
    }
    try{
        const res = await getRemovalInfo(getRemovalInfoFunData)
        if(res.data.code == 200){
            RemovalDetail.value = res.data.dataset.list
            // console.log(RemovalDetail.value);
            RemovalDetailNews.value = ([
                {title:'工单号',value:RemovalDetail.value.clearanceWorkOrder},
                {title:'设备编号',value:RemovalDetail.value.code},
                {title:'清运重量',value:RemovalDetail.value.weight+'kg'},
                {title:'清运时间',value:RemovalDetail.value.removalTime},
                {title:'清运结果',value:RemovalDetail.value.result == 0 ? '未处理' : '已处理'},
                // {title:'投递次数',value:RemovalDetail.value.clearanceWorkOrder},
            ])
            clearanceWorkOrder.value = RemovalDetail.value.clearanceWorkOrder
        }
    }catch(error){}
}

let show = ref(false)
let correctBtn = ref([
    {title:'是',value:2},
    {title:'否',value:1}
])
const goUpload = () => { //点击上传运清结果
    show.value = true
}
const goUpdateSure = async (item) => { //点击是
    const {value} = item
    let goUpdateClearResultData = {
        clearance_work_order:clearanceWorkOrder.value,
        feedback:value
    }
    try{
        const res = await goUpdateClearResult(goUpdateClearResultData)
        if(res.data.code == 200){
            showToast('操作成功')
        }
    }catch(error){}
    show.value = false
}

const goLookDeliverReport = () => { //点击查看投递记录
    router.push({
        path:'/DeliverReport',
        query:{
            code:RemovalDetail.value.code,
            id:route.query.id
        }
    })
}

onMounted(() => {
    getRemovalInfoFun()
})
</script>

<style lang="less" scoped>
.container{
    height:100vh;
    background-color: #F9F9F9;
    :deep(.van-nav-bar .van-icon){
        color:#000
    }
    .content{
        width:100vw;
        box-sizing: border-box;
        padding:2em 1em;
        font-size: 4em;
        background-color: #fff;
        .title{
            box-sizing: border-box;
            padding-bottom: 1em;
            border-bottom: 1px dashed #ccc;
            font-weight: bold;
            font-size: 1.2em;
        }
        .item{
            width:100%;
            box-sizing: border-box;
            padding-top:1em;
            display: flex;
            gap:1em;
            flex-direction: column;
            .news{
                display: flex;
                justify-content: space-between;
            }
        }
        .operate{
            width:100%;
            display: flex;
            justify-content: center;
            gap:1em;
            margin-top:4em;
            button{
                background: none;
                border:1px solid #2488ED;
                color: #2488ED;
                box-sizing: border-box;
                padding:0.5em 1.5em;
                border-radius: 2em;
                font-weight: bold;
            }
        }
        .wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            width:100vw;
            font-size: 1em;
            .block {
                width: 90vw;
                background-color: #fff;
                box-sizing: border-box;
                padding:1.5em 1em;
                border-radius: 1em;
                position: relative;
                p{
                    font-weight: bold;
                    text-align: center;
                    font-size: 1.2em;
                    margin-bottom: 0.6em;
                }
                .operate{
                    display: flex;
                    justify-content: center;
                    gap:0.5em;
                    margin-top:1em;
                    button{
                        background: none;
                        border:1px solid #2488ED;
                        box-sizing: border-box;
                        padding:0.4em 1.8em;
                        border-radius: 1.1em;
                        color:#2488ED;
                        font-weight: bold;
                    }
                }
                img{
                    width:2.5em;
                    position: absolute;
                    bottom:-4em;
                    left:50%;
                    transform: translateX(-50%);
                }
            }
        }
    }
}
</style>